<template>
	<view class="pagesWhite">
		<view class="integralBg"></view>
		<!-- 头部 -->
		<view class="header_bar header_fixed">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">消费券专区</view>
				<view class="header-right" @tap.stop="$tools.switchTab('/pages/car/car')">
					<image src="@/static/public/car.png" mode=""></image>
				</view>
			</view> 
			<view class="searchBox ">
				<view class="searchBox-item searchBox-item--whiteBg">
					<!-- :focus="true"  -->
					<input type="text" placeholder="请输入要搜索的商品名称" placeholder-class="inputStyle" v-model="searchValue">
					<image @tap.stop="$tools.jump('/pages/search/search')" src="@/static/public/sreach.png" mode=""></image>
					<!-- <view class="searchBox-btn" @tap.stop="search()">搜索</view> -->
				</view>
			</view>
			<!-- <view class="tabsBox">
				<u-tabs :list="list" :is-scroll="true" :current="active" 
				name="name"
				:activeStyle="{
					color: '#1989F8',
				}"
				:inactiveStyle="{
					color: '#131414',
				}"
				lineColor="#1989F8" lineWidth="30" lineHeight="2"
				@change="change"></u-tabs>
			</view> -->
		</view> 
		
		<!-- <view class="titleBox titleBox--fixed">{{ activeTitle }}</view> -->
		
		<!-- 商品列表 -->
		<view class="goodsListBox">
			<scroll-view scroll-y class="typePage-left">
				<view v-for="(item,index) in flist" :key="item.id" :data-id="item.id"
				class="typePage-left__item b-b" 
				:class="{active: item.id === tabActive}"
					@tap="tabtap(item,index)">
					<text>{{ item.cateName }}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="typePage-right" scroll-with-animation="true"
			:scroll-into-view="tabActiveText" v-if="isShowPage">
			<!--  v-for="(itemK,indexK) in 12" :key="itemK.id" -->
				<view class="" :id="'item-'+tabActiveIndex">
					<view class="typeName" v-if="flist.length > 0">{{ flist[tabActiveIndex].cateName }}</view>
					<view class="typePage-right__list">
						<view v-for="(item,index) in categoryLowList" :key="item.id" class="typePage-right__item"
						@tap.stop="$tools.jump('/pages/goods/goodsList',item.id,2)"
						v-if="categoryLowList.length != 0">
							<view class="imgBox">
								<!-- <image :src="'../../static/index/goods-'+(index+1)+'.png'" mode="aspectFill"></image> -->
								<image class="img" :src="item.pic" mode="aspectFill"></image>
							</view>
							<view class="content">
								<view class="name">{{ item.cateName }}</view>	
							</view>
						</view>
						<view class="initNoData" v-if="categoryLowList.length == 0"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList/goodsList.vue';
	export default {
		components:{
			goodsList
		},
		data(){
			return{
				searchValue: '',
				list: [
					{name: '电器'},{name: '茶饮'},{name: '名酒'},{name: '衣服'},{name: '健康'},
					{name: '智能'},{name: '奢侈'},{name: '茶饮'},{name: '名酒'},{name: '衣服'},{name: '健康'},
				],
				active: 0,
				activeTitle: '电器',
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				goodsDataList: [
					{id: 1,cateName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7'},
					{id: 1,cateName: '表现金美孚SP级0W-40全合成机油发动机润表现金美孚SP级0W-40全合成机油发动机润',price: '899.7'},
				],
				isShowPage: false,
				tabActive: 1,
				tabActiveText: '',
				flist: [
					{id: 1,cateName: '特色美食'},{id: 2,cateName: '服饰内衣'},{id: 3,cateName: '家用百货'},{id: 4,cateName: '数码科技'},
					{id: 5,cateName: '珠宝配饰'},{id: 6,cateName: '户外运动'},{id: 7,cateName: '箱包'},{id: 8,cateName: '洗护'},{id: 9,cateName: '家电'},{id: 10,cateName: '数码科技'},
					{id: 11,cateName: '特色美食'},{id: 12,cateName: '服饰内衣'},{id: 13,cateName: '家用百货'},{id: 14,cateName: '数码科技'},
					{id: 15,cateName: '珠宝配饰'},{id: 16,cateName: '户外运动'},{id: 17,cateName: '箱包'},{id: 18,cateName: '洗护'},{id: 19,cateName: '家电'},
				],
				tabScrollTop: 0,
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			console.log("onReachBottom");
			if(this.lsShow == true){
				this.pageIndex++;
				console.log("+++")
				this.getGoodsCategoryGoods();
			}else{
				// return this.$tools.toast(this.$t('noLast'));
			}
		},
		methods: {
			init(){
				this.flist = [];
				this.getCategoryOneList();
			},
			// 查询商品分类列表
			getCategoryOneList() {
				var data = {};
				this.$Ajax('/api/product/categoryOneList',data,res => {
						if (res.code == 200) {
							this.flist = res.data.list;
							console.log("this.flist，",this.flist);
							this.tabActiveIndex = 0;
							this.tabActive = res.data.list[0].id;
							this.isShowPage = false;
							this.getCategoryLowList();
						}
					}, err =>{
					}, 'GET'
				)
			},
			getCategoryLowList() {
				var data = {};
				data['pid'] = this.tabActive;
				this.$Ajax('/api/product/categoryLowList',data,res => {
						if (res.code == 200) {
							this.categoryLowList = res.data;
							this.isShowPage = true;
						}
					}, err =>{
					}, 'GET'
				)
			},
			//一级分类点击
			tabtap(item,index) {
				if(this.tabActive != item.id){
					this.tabActive = item.id;
					this.tabActiveText = 'item-' + item.id;
					this.tabActiveIndex = index;
					this.isShowPage = false;
					this.getCategoryLowList();
				}
			},
			change(obj) {
				console.log("obj:",obj);
				this.active = obj.index;
				this.activeTitle = obj.name;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header + view{
		padding-top: 0 !important;
	}
	page{
		background: #F5F5F5 !important;
	}
	.typeBg{
		width: 100%;
		background: #F5F5F5;
	}
	
	.searchBox{
		width: calc(100% - 60rpx);
		margin: auto;
		height: 80rpx;
		&-item{
			@include flexBetween;
			padding: 18rpx 30rpx;
			input{
				width: 80%;
			}
		}
		&-btn{
			padding: 15rpx 32rpx;
		}
	}
	
	.tabsBox{
		height: 92rpx;
	}
	.header_fixed  + view{
		padding-top: 10rpx !important;
	}
	.titleBox{
		/* #ifdef H5 */
		margin-top: calc(90rpx + 80rpx + 92rpx) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: calc(165rpx + 80rpx + 92rpx) !important;
		/* #endif */
		padding-left: 54rpx;
		width: 100vw;
		background: #F5F5F5;
		height: 80rpx;
		line-height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #131414;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left: 22rpx;
			top: 50%;
			transform: translate(0,-50%);
			width: 14rpx;
			height: 14rpx;
			background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
			border-radius: 50%;
		}
		&--fixed{
			position: fixed;
			/* #ifdef H5 */
			top: calc(90rpx + 80rpx + 90rpx) !important;
			/* #endif */
			/* #ifdef APP-PLUS */
			top: calc(165rpx + 80rpx + 90rpx) !important;
			/* #endif */
			margin-top: 0 !important;
			z-index: 5;
		}
	}
	
	.goodsListBox{
		/* #ifdef H5 */
		margin-top: calc(90rpx + 80rpx + 20rpx) !important;
		height: calc(100vh - (90rpx + 80rpx + 20rpx));
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: calc(165rpx + 80rpx + 20rpx) !important;
		height: calc(100vh - (165rpx + 80rpx + 20rpx));
		/* #endif */
		width: 100%;
		@include flexLeft;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		z-index: 2;
		.typePage{
			&-right{
				padding-top: 0;
			}
		}
		.typeName{
			@include flexLeft;
			width: 95%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #3A3A3A;
			padding-top: 26rpx;
			padding-bottom: 26rpx;
			border-bottom: 2px solid rgba(200,200,200,0.13);
		}
	}
	
	.integralBg{
		background: url('@/static/shop/integralTypeBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100vw;
		/* #ifdef H5 */
		height: calc(498rpx - 90rpx);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 498rpx;
		/* #endif */
		position: fixed;
		top: 0;
		z-index: 1;
	}
	
</style>